<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <title>wifi传输</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <style type="text/css">
        .breadcrumb a {
            color: #666;
            text-decoration: underline;
        }

        .breadcrumb > .active {
            color: #123123;
        }

        .logo {
            height: 64px;
            margin-left: 24px;
            text-align: center;
            background-image: url('/img/WIFI.png');
            background-repeat: no-repeat;
        }

        .logoTitle {
            padding-left: 64px;
            padding-top: 15px;
            color: #1296db;
        }

        .mTop {
            margin-top: 10px;
        }

        .padding {
            padding: 5px;
        }

        .col-md-2 {
            border: solid #ffffff 1px;
        }

        .col-md-2:hover {
            border: solid #eeeeee 1px;
            border-radius: 5px;
            background-color: #efefef;

        }

        .col-md-2 a {
            color: #666;
            text-decoration: none;
        }

        .overlay {
            display: none;
            background-color: #666666;
            filter: alpha(Opacity=60);
            -moz-opacity: 0.6;
            opacity: 0.6;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        var path ="";
        function gotoFolder(url) {
            $.getJSON(url, function (data) {
                path = data.path;//路劲
                var list = data.list;//列表项
                var navHtml = "";
                var nav = "";
                var html = "";
                //分割路径
                var pathArray = path.split('\/');
                var newArray = new Array();
                //去除空内容
                for (var i = 0; i < pathArray.length; i++) {
                    if (pathArray[i] != "") {
                        newArray.push(pathArray[i]);
                    }
                }
                nav += "/folder"+"/";
                navHtml += "<li><a href=\"javascript:void(0);\" onclick=\"gotoFolder('"+nav+"');\">手机存储</a></li>";
                $.each(newArray, function (index, item) {
                    nav += item + "/";
                    if (index == newArray.length - 1) {
                        navHtml += "<li class=\"active\">" + item + "</li>";
                    } else {
                        navHtml += "<li><a href=\"javascript:void(0);\" onclick=\"gotoFolder('"+nav+"');\">" + item + "</a></li>";
                    }

                });
                console.log(nav);
                console.log(navHtml);
                $("#nav").html(navHtml);
                $.each(list, function (index, item) {
                    if ((index % 6) == 0) {
                        html += "<div class=\"row\">";
                    }
                    var typeImage = "";
                    if (item.type == "folder") {
                        typeImage = "/img/folder.png";
                    } else if (item.type == "img") {
                        typeImage = "/img/file_image.png";
                    } else if (item.type == "video") {
                        typeImage = "/img/file_video.png";
                    } else if (item.type == "file") {
                        typeImage = "/img/file_unknow.png";
                    }
                    var id = "item_" + index;
                    var url = "";
                    if (item.type == "folder") {
                        url = "/folder"+path + item.name + "/";
                        console.log("url:"+url);
                        html += "<div class=\"col-md-2 padding\" >" +
                                " <a href=\"javascript:void(0);\" onclick=\"gotoFolder('"+url+"');\">" +
                                " <img src=\"" + typeImage + "\" class=\"center-block\">" +
                                "<p class=\"text-center mTop\">" + item.name + "</p>" +
                                "</a>" +
                                "<div class=\"overlay\" >" +
                                " </div>" +
                                "</div>";
                    }else {
                        url = "/file"+ path + item.name;
                        console.log("url:"+url);
                        html += "<div class=\"col-md-2 padding\" >" +
                                " <a href=\""+url+"\" target='_blank'>" +
                                " <img src=\"" + typeImage + "\" class=\"center-block\">" +
                                "<p class=\"text-center mTop\">" + item.name + "</p>" +
                                "</a>" +
                                "<div class=\"overlay\" >" +
                                " </div>" +
                                "</div>";
                    }

                    if ((index % 6) == 5) {
                        html += "</div>";
                    }
                });
                $("#content_list").html(html);
            });
        }
        gotoFolder('/folder/');

    </script>
</head>

<body>
<div class="container">
    <div class="row">
        <div class="logo">
            <h3 class="pull-left logoTitle">WIFI传输</h3>
        </div>
    </div>
    <ol class="breadcrumb" style="background-color:#ffffff;margin-top: 10px;" id="nav"></ol>
    <div class="container" id="content_list"></div>
</div>

</body>

</html>